<!--  -->
<template>
    <div class="li-row" :style="styles">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed, provide } from 'vue';
import { AlignItemsEnum, JustifyContentEnum } from '@/enum/style-enum';

const props = defineProps({
    // 垂直对齐方式： center 居中 （默认） | top 靠上 | bottom 靠下
    align: {
        type: String,
        default: 'center'
    },
    // 水平对齐方式： center 居中 （默认） | left 靠左 | right 靠右 | space-between 等宽排列 | space-around 分散排列 | space-evenly
    justify: {
        type: String,
        default: 'center'
    },
    // 区块间隔距离
    gutter: {
        type: [Number],
        default: 0
    }
});

provide('gutter', props.gutter);

const styles: object = computed(() => {
    let style: object = {};

    if (['center', 'top', 'bottom'].includes(props.align)) {
        style['align-items'] = AlignItemsEnum[props.align];
    } else {
        style['align-items'] = 'center';
    }

    if (['center', 'left', 'right', 'space-between', 'space-around'].includes(props.justify)) {
        style['justify-content'] = JustifyContentEnum[props.justify];
    } else {
        style['justify-content'] = 'center';
    }
    return style;
});

const install = (app: any) => {
    app.component('LiRow', this);
};
</script>

<style lang="less" scoped>
@import './li-row-col.less';
</style>
